<template>
  <div>
    <a-row style="background:#fff" :gutter="[0, 0]">
      <a-col>
        <a-card :body-style="{ padding: '10px' }" :bordered="false">

          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width:100%;
              height:30px;
              float:right;
              margin-bottom:10px;
              justify-content: space-between;
            "
          >
          <span style="padding-left:12px;color: rgba(0, 0, 0, 0.85);font-size: 14px;">当前有<span style="padding:0 3px">{{tableData.length}}</span>条数据</span>
            <div
              style="text-align: right; cursor: pointer"
              class="handle"
            >
              <!-- <a
                href="javascript:;"
                style="margin: 0 10px 0 0"
                @click="addResourceHandle"
                >新增</a
              > -->
              <a v-if=" visibleBtn !== 0 " class="addStyle" style="margin-right: 8px;color:#fff;" @click="addResourceHandle" v-permission:mumberManage="['add']">
                  <span><a-icon type="plus"/>新增</span>
                </a>
            </div>
          </div>

          <div style="margin-top: 40px">
            <a-table
              :columns="columns"
              :data-source="tableData"
              :pagination="pagination"
              size="small"
            >

                 <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <a href="javascript:;" style="margin: 0 10px"  @click="deleteResourceHandle(text, record, index)"
                  v-permission:mumberManage="['deleteMember']"> 移除成员</a>
                 

                </div>
              </template>

            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-modal
      title="选择人员"
      width="40%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <a-form-model
        ref="ruleForm"
        :model="menuObj"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item ref="name" label="选择人员" prop="userIds">

          <a-checkbox-group style="margin:10px" v-model="checkedList" @change="onChange">
            <div v-for="(vo, key) in treeDates" :key="key">
              <a-checkbox :value="'' + vo.id">{{ vo.name }}</a-checkbox>
            </div>
          </a-checkbox-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  queryListA,
  queryRoleUserListB,
  roleEnable,
  deleteRoleUserAS,
  QXsaveRoleUserA,
  roleUpdate,
} from "../../services/system";
export default {
  name: "MenuManage",
  data() {
    return {
      visibleBtn: this.$route.query.initFlag * 1,
      id: this.$route.query.id,
      tilte: "",
      appList: [],
      channelList: [],
      query: {
        appInfoCode: null,
        channelType: null,
      },

      treeDates: [],
      checkedList: [],
      tableData: [],

      roleType: "",
      visible: false,
      sortVisible: false,
      confirmLoading: false,
      parentObj: {},
      menuObj: {
        userIds: null,

        tenantCode: sessionStorage.getItem("tenantCode"),
      },
      sortObj: {
        id: null,
        tenantCode: null,
      },
      rules: {
        userIds: [{ required: true, message: "不能为空", trigger: "blur" }],
        code: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      rules1: {
        sortVaule: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "部门名称",
          dataIndex: "orgNames",
        },
        {
          title: "岗位",
          dataIndex: "postNames",
        },
        {
          title: "用户账号",
          dataIndex: "loginName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
        },

        {
          title: "操作",
          dataIndex: "Action",
          scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },
  created() {
    this.getRoleList();
    console.log(this.$route.query.initFlag);
  },

  methods: {
    getRoleList() {
      if (sessionStorage.getItem("roleType") == "TENTANT_ADMIN") {
        this.roleType = "NORMAL";
      } else if (sessionStorage.getItem("roleType") == "PLATFORM_ADMIN") {
        this.roleType = "TENTANT_ADMIN";
      }
      const parma = {
        roleType: this.roleType,
        tenantCode: sessionStorage.getItem("tenantCode"),
      };
      queryRoleUserListB(this.$route.query.id, parma).then((res) => {
        this.tableData = res.data.data.rows;
      });

      const parmas = {
        tenantCode: sessionStorage.getItem("tenantCode"),
         roleId:this.$route.query.id,
      };
      queryListA(parmas).then((res) => {
        this.treeDates = res.data.data.rows;
      });
    },

    onChange(res) {

      console.log(res)

    },

    handleOk() {
        console.log("a===",this.checkedList)

      this.menuObj.userIds=this.checkedList.join(",")
 console.log("a===",this.menuObj)

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let handle;

          if (this.menuObj.id) {
            handle = roleUpdate(this.menuObj.id, this.menuObj);
          } else {
            handle = QXsaveRoleUserA(this.$route.query.id,this.menuObj);
          }
          handle
            .then((res) => {
              this.confirmLoading = false;
              if (res.data.status == 0) {
                this.visible = false;
                this.getRoleList();
              }
            })
            .catch((error) => {
              console.log(error);
              this.confirmLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    addResourceHandle() {
      this.visible = true;
    },
    updateResourceHandle(text, item) {
      console.log(item);
      this.menuObj = item;
      this.menuObj.tenantCode = sessionStorage.getItem("tenantCode");
      this.visible = true;
    },

    enableResourceHandle(text, item) {
      let vm = this;

      if (item.shield == 0) {
        //要去禁用
        vm.title = "您确定要禁用该数据？";
        item.shield = 1;
      } else {
        //要去启用
        vm.title = "您确定要启用该数据？";
        item.shield = 0;
      }
      this.$confirm({
        title: vm.title,
        onOk() {
          return new Promise((resolve, reject) => {
            roleEnable(item.id, item.shield).then((res) => {
              if (res.data.status == 0) {
                vm.getRoleList();
                resolve();
              } else {
                reject(res.data.msg);
              }
            });
          });
        },
        onCancel() {},
      });
    },
    sortResourceHandle(text, item) {
      console.log(item);
      this.sortVisible = true;
      this.sortObj.id = item.id;
      this.sortObj.sortVaule = "";
      this.sortObj.tenantCode = sessionStorage.getItem("tenantCode");
    },

    deleteResourceHandle(text, item) {
      let vm = this;
      console.log(item)
      this.$confirm({
        title: "您确定要移除该数据？",
        content: "数据移除后不可恢复",
        onOk() {
          return new Promise((resolve, reject) => {
            deleteRoleUserAS(vm.id,{userIds:item.id}).then((res) => {
              if (res.data.status == 0) {
                vm.getRoleList();
                resolve();
              } else {
                reject(res.data.msg);
              }
            });
          });
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less" scoped>

.menu {
  .handle {
    i {
      margin: 0 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.addStyle{
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgb(0, 121, 254);
  width:78px;
  height:30px;
}
</style>
